<template>
  <Dialog
    ref="refDialog"
    title="关键字签章"
    @submit="onSubmit"
    width="500"
    draggable
    textOk="签章"
    @close="onClose"
  >
    <el-form
      ref="refForm"
      @keyup.enter="onSubmit"
      @submit.native.prevent
      :model="formData"
      :rules="formRules"
    >
      <el-form-item label=" " prop="keyword">
        <el-autocomplete
          class=""
          placeholder="请输入关键字"
          v-model="formData.keyword"
          :fetch-suggestions="querySearchAsync"
          @select="handleSelect"
          clearable
          :fit-input-width="true"
          maxlength="20"
          show-word-limit
        >
          <template #default="{ item }">
            <div v-if="item.isClearHistory" class="flex justify-end">
              清空历史搜索
            </div>
            <div v-else>
              <div class="line1">{{ item.value }}</div>
            </div>
          </template>
        </el-autocomplete>
      </el-form-item>
    </el-form>
  </Dialog>
</template>
<script setup>
import { reactive, toRefs, ref, onMounted, inject } from "vue";
import { ls } from "@/utils";

const provideHome = inject("provideHome");
const refDialog = ref();
const refForm = ref();

const state = reactive({
  style: {},
  formData: {
    keyword: "",
  },
});
const { style, formData } = toRefs(state);

const emits = defineEmits(["submit"]);

const WORD_HISTORY_KEY = "wordHistory";

const formRules = {
  keyword: [{ required: true, message: "请输入关键字", trigger: "blur" }],
};

let links = [
  // { value: "前端" },
  // { value: "后端" },
  // { value: "全栈" },
  // { value: "运维" },
  // { value: "测试" },
  // { value: "产品" },
  // { value: "UI" },
  // { value: "运维" },
  // { value: "测试" },
  // { value: "产品" },
  // { value: "UI" },
];

const onClose = () => {
  provideHome.methods.setSealCurrentOperateName("");
};

const querySearchAsync = (queryString, cb) => {
  let results = [];
  if (queryString) {
    results = links.filter(item => {
      if (item.isClearHistory) {
        return false;
      }
      return item.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1;
    });
  } else {
    results = [].concat(links);
  }
  if (results.length) {
    if (results.length > 10) {
      results.length = 9;
    }
    //添加“清空历史记录”
    results.push({
      isClearHistory: true,
    });
  }
  cb(results);
};

const handleSelect = item => {
  if (item.isClearHistory) {
    ls.remove(WORD_HISTORY_KEY);
    links = [];
  }
  // console.log(item);
};

const onSubmit = async () => {
  refForm.value.validate(async valid => {
    if (valid) {
      emits("submit", state.formData);
    }
  });
};

const onReset = () => {
  refForm.value?.resetFields();
};

onMounted(() => {});

defineExpose({
  show() {
    onReset();
    refDialog.value.show();
    links = (ls.get(WORD_HISTORY_KEY) || []).map(item => {
      return { value: item };
    });
  },
  close() {
    refDialog.value.close();
  },
});
</script>
<style lang="scss">
.el-autocomplete-suggestion {
  li {
    line-height: 28px !important;
    &:hover {
      color: #3461ff;
    }
  }
}
.el-autocomplete-suggestion__wrap {
  max-height: 300px !important;
}
</style>
